import { React, useRef } from 'react';
import './changephone.css';
import '../../../index.css';
import yanzhengma from '../../../login_module/loginID/img/verify.png'
import { useLocation } from 'react-router';
import { useNavigate } from 'react-router-dom';

export default function Changephone() {

    const data = useLocation();
    const iphone = useRef();
    const pass = useRef()
    const auth = useRef()
    const navigate = useNavigate();
    console.log(data);

    function verify() {

        if (iphone.current.value === data.state.data.user_name && pass.current.value === data.state.data.user_pass && auth.current.value === 'xqcr') {
            navigate("/home/person/changephone2", {
                state: {
                    data: data.state.data
                }
            })
        }
        else if (iphone.current.value !== data.state.data.user_name || pass.current.value !== data.state.data.user_pass || auth.current.value !== 'xqcr') {
            alert('账号或密码错误')
        }
    }

    return (
        <div id="changePhone">
            <div className="changePhone_top">换绑手机</div>
            <div className="changephone_main">
                <div className="changephone_daohang">
                    <div className="changephone_dao1" id="changephone_liang"><span>1.验证原手机号</span></div>
                    <div className="changephone_dao2" id="changephone_liang2"></div>
                    <div className="changephone_dao1"><span>2.验证新手机号</span></div>
                    <div className="changephone_dao2"></div>
                    <div className="changephone_dao1"><span>3.换绑成功</span></div>
                </div>
                <input type="text" placeholder="请输入手机号" className="changephone_lie" ref={iphone}></input>
                <div id="login_yanzheng" className="changephone_lie">
                    <input type="text" id="yanzhengma" placeholder="验证码" ref={auth}></input>
                    <img src={yanzhengma} alt=""></img>
                    <span>看不清换一张</span>
                </div>
                <div className="login_phonecode changephone_lie">
                    <input type="password" placeholder="请输入密码验证身份" ref={pass}></input>
                </div>
                <div className="changephone_lie">
                    <button onClick={verify}>提交验证</button>
                </div>
            </div>

        </div>
    )
}
